<template>
    <div class="full-percent">
        <el-table :data="appInfo" border height="100%" header-cell-class-name="el-table-header-cell"
            cell-class-name="el-table-cell" class="e-page">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="Class" label="Class" min-width="300" />
            <el-table-column prop="Method" label="Method" min-width="320">
                <template #default="scope">
                    <div style="cursor: pointer;color: #08c;" @click="appDetail(scope.row)" class="cursor-pointer">
                        {{ scope.row.Method }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="ExecuteCount" label="执行数" width="100" />
            <el-table-column prop="ExecuteTimeMillis" label="执行时间" width="120" />
            <el-table-column prop="RunningCount" label="执行中" width="100" />
            <el-table-column prop="ConcurrentMax" label="最大并发" width="120" />
            <el-table-column prop="JdbcExecuteCount" label="Jdbc执行数" width="120" />
            <el-table-column prop="JdbcExecuteTimeMillis" label="Jdbc时间" width="100" />
            <el-table-column prop="JdbcCommitCount" label="事务提交数" width="140" />
            <el-table-column prop="JdbcRollbackCount" label="事务回滚数" width="140" />
            <el-table-column prop="JdbcFetchRowCount" label="读取行数" width="120" />
            <el-table-column prop="JdbcUpdateCount" label="更新行数" width="120" />
            <el-table-column prop="Histogram" label="执行时间分布" width="240">
                <template #default="scope">
                    {{ scope.row.Histogram }}
                </template>
            </el-table-column>
        </el-table>

        <el-drawer v-model="showSql" direction="ltr" :show-close="false" @open="open" :close-on-press-escape="false"
            size="80%" @close="close" append-to-body>
            <template #header>
                <div class="font-auto-resize">Spring Stat</div>
            </template>
            <el-scrollbar style="height: 100%;width: 100%" ref="scrollRef">
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="Class" labelClassName="label">
                        <div class="forbid-select">{{ detail.Class }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Method" labelClassName="Method">
                        <div class="forbid-select">{{ detail.Method }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="执行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.ExecuteCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="执行出错数" labelClassName="label">
                        <div class="forbid-select">{{ detail.ExecuteErrorCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="执行时间" labelClassName="label">
                        <div class="forbid-select">{{ detail.ExecuteTimeMillis }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="执行中" labelClassName="label">
                        <div class="forbid-select">{{ detail.RunningCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="最大并发" labelClassName="label">
                        <div class="forbid-select">{{ detail.ConcurrentMax }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Jdbc执行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecuteCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Jdbc出错数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecuteErrorCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="Jdbc时间" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcExecuteTimeMillis }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="事务提交数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcCommitCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="事务回滚数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcRollbackCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="读取行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcFetchRowCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="更新行数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcUpdateCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="连接池获取连接次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcPoolConnectionOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="连接池关闭连接次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcPoolConnectionCloseCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ResultSet打开次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcResultSetOpenCount }}</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="ResultSet关闭次数" labelClassName="label">
                        <div class="forbid-select">{{ detail.JdbcResultSetCloseCount }}</div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-scrollbar>
        </el-drawer>
    </div>
</template>
<script setup>
import { useModalSize, useRequest, useUnMounted } from "@usehook"

let appInfo = $ref([])
let showSql = $ref(false)
let detail = $ref({})
let interval = $ref(null)
const scrollRef = $ref(null)

const getData = () => {
    useRequest({
        url: "/dataSource/druid/spring.json?orderBy=&orderType=asc&page=1&perPageCount=1000000"
    }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            appInfo = resp.Content
        }
    })
}
const appDetail = (row) => {
    useRequest({ url: "/dataSource/druid/spring-detail.json?class=" + row.Class + '&method=' + row.Method }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            detail = resp.Content
        }
    }).finally(() => {
        showSql = true
    })
}
const close = () => {
    useModalSize(false)
}
const open = () => {
    useModalSize()
    if (scrollRef) setTimeout(() => {
        scrollRef.wrapRef.scrollTop = 0
    }, 100)
}
const clear = () => {
    if (interval) clearInterval(interval)
    interval = null
}

onActivated(() => {
    getData()
    clear()
    interval = setInterval(() => {
        getData()
    }, 10000)
})

useUnMounted(() => {
    clear()
})

</script>


<style scoped>
:deep(.label) {
    width: 250px;
}

:deep(.el-descriptions-row th) {
    text-align: right !important;
}

:deep(.el-drawer__body) {
    padding: 0 5px;
}

:deep(h3) {
    margin: 10px 0;
}

:deep(.el-drawer__header) {
    margin-bottom: 20px;
}
</style>